<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
   <meta charset="UTF-8">
   <title></title>
   <meta name="description" content="">
   <meta name="viewport" content="width=device-width, initial-scale=1">

   <!--====== Favicon Icon ======-->
   <link rel="shortcut icon" href="/images/favicon.png" type="image/png">

   <!--====== Bootstrap CSS ======-->
   <link rel="stylesheet" href="/css/bootstrap.min.css">
   <link rel="stylesheet" href="/font/bootstrap-icons.css">

   <!--====== LayerUI CSS ======-->
   <link rel="stylesheet" href="/js/layui/css/layui.css">

   <!--====== default CSS ======-->
   <link rel="stylesheet" href="/css/default.css">
   <!--====== Style CSS ======-->
   <link rel="stylesheet" href="/css/style.css">
   <!--====== myStyle CSS ======-->
   <link rel="stylesheet" href="/css/myStyle.css">
</head>
<body id="content-body">
   <!--[if IE]>
   <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
   <![endif]-->

   <!--====== PRELOADER PART START ======-->

   <div class="preloader">
      <div class="loader">
         <div class="ytp-spinner">
            <div class="ytp-spinner-container">
               <div class="ytp-spinner-rotator">
                  <div class="ytp-spinner-left">
                     <div class="ytp-spinner-circle"></div>
                  </div>
                  <div class="ytp-spinner-right">
                     <div class="ytp-spinner-circle"></div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>

   <!--====== PRELOADER PART ENDS ======-->

   <!--====== NAVBAR TWO PART START ======-->

   <section class="navbar-area sticky">
      <div class="container">
         <div class="row">
            <div class="col-lg-12">
               <nav class="navbar navbar-expand-lg">

                  <a class="navbar-brand" href="#">
                     <img src="/images/logo2.png" alt="Logo" width="64px">
                  </a>

                  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTwo" aria-controls="navbarTwo" aria-expanded="false" aria-label="Toggle navigation">
                     <span class="toggler-icon"></span>
                     <span class="toggler-icon"></span>
                     <span class="toggler-icon"></span>
                  </button>

                  <div class="collapse navbar-collapse sub-menu-bar" id="navbarTwo">
                     <ul class="navbar-nav m-auto">
                        <li class="nav-item"><a class="page-scroll" th:href="@{/#home}">首页</a></li>
                        <li class="nav-item"><a class="page-scroll" th:href="@{/#content}">大赛介绍</a></li>
                        <li class="nav-item"><a class="page-scroll" th:href="@{/#plan}">赛程流程</a></li>
                        <li class="nav-item"><a class="page-scroll" th:href="@{/uis/enrollUI}">大赛报名</a></li>
                        <li class="nav-item"><a class="page-scroll" th:href="@{/#books}">学习资料</a></li>
                        <li class="nav-item"><a class="page-scroll" th:href="@{/#org}">组织机构</a></li>
                        <li class="nav-item"><a class="page-scroll" th:href="@{/uis/welfareUI}">公益行</a></li>
                        <li class="nav-item active"><a class="page-scroll" th:href="@{/uis/cooperUI}">对外合作</a></li>
                        <li class="nav-item"><a class="page-scroll" th:href="@{/uis/infomations}">下载</a></li>
                     </ul>
                  </div>

                  <div class="navbar-btn d-none d-sm-inline-block">
                     <ul>
                        <li><a class="solid" th:href="@{/uis/loginUI}">登陆</a></li>
                     </ul>
                  </div>
               </nav> <!-- navbar -->
            </div>
         </div> <!-- row -->
      </div> <!-- container -->
   </section>

   <!-- ==================== BANNER START============================= -->
   <div class="banner">
      <div class="layout">
         <h2>对外合作</h2>
         <h3>EXTERNAL COOPERATION</h3>
      </div>
   </div>
   <!-- ====================  BANNER END============================= -->

   <div class="container">
      <div class="cooper-panel">
         <div class="row">
            <div class="col-lg-6 left">
               <div class="left-title">高校合作</div>
               <div>
                  <p>高校的合作主要是解决四方面的问题：科研经费、国家课题、技术论坛和学生就业。</p>
                  <p>大学生是大赛的主力军，一个学校可以有一支队伍，也可以有很多支队伍。这些队伍的学生除了参赛以外还可以参加辅导，通过辅导解决学生的就业问题。在这个过程中学校可以提交合作申请，申请开办哪一类专业的大赛（赛道），我方将根据申请的情况决定下一年的赛道和辅导重点的安排。</p>
                  <p>每次大赛我们将提供不少于30个国家部委的课题和不少于2000万的企业课题，学校可以根据自己的情况申报课题，我方将根据各个学校申请的情况，决定本届课题的归属和下一届课题的重点方向。</p>
                  <p>在每次大赛之前我方会公布与本次大赛共同举办的学术论坛的内容，学校可以根据自身的情况申请参加对应的论坛和是否需要作报告。并在每次来论坛结束后下次论坛开始前的3个月，申请下次开设论坛的方向，我方将根据各校的申请情况选择关注最多的方向举办对应的学术论坛。</p>
                  <p>科研经费是每个学校都关注的内容，我方将开设专门的渠道接收各个学校（教师和个人）申请，申请人需要提交科研方向、需要经费及经费的使用计划等。我们会根据申请的内容帮助学校（教师或个人），匹配相应的经费和投资人。</p>
               </div>
            </div>
            <div class="col-lg-6 right">
               <div class="right-title">合作申请</div>
               <form id="myForm">
                  <input type="text" name="name" id="name" class="form-control" placeholder="学校名称*">
                  <select id="cooperType" name="cooperType" class="form-control">
                     <option value="">请选择合作类型*</option>
                     <option value="1">科研经费</option>
                     <option value="2">国家课题</option>
                     <option value="3">技术论坛</option>
                     <option value="4">学生就业</option>
                  </select>
                  <input type="text" name="personName" id="personName" class="form-control" placeholder="负责人*">
                  <input type="text" name="position" id="position" class="form-control" placeholder="职务*">
                  <input type="text" name="mobile" id="mobile" class="form-control" placeholder="联系方式*">
                  <textarea name="detail" id="detail" class="form-control" placeholder="详细说明*"></textarea>
                  <div class="right-btn">
                     <input type="submit" value="申请合作" class="content-btn">
<!--                     <a class="content-btn" href="javascript:void(0)" onclick="document.getElementById('myForm').submit();">申请合作</a>-->
                  </div>
               </form>
            </div>
         </div>
      </div>
   </div>
   <div th:insert="common/footer :: footer"></div>

   <!--====== Jquery js ======-->
   <script src="/js/jquery-1.12.4.min.js"></script>
   <script src="/js/jquery-validate.js"></script>
   <script src="/js/sweetalert.min.js"></script>
   <!--====== Bootstrap js ======-->
   <script src="/js/bootstrap.min.js"></script>

   <!--====== index  common js ======-->
   <script src="/js/common.js"></script>
   <script type="text/javascript">
      $(document).ready(function(){
         $("#myForm").validate({
            rules: {
               name: {
                  required: true
               },
               cooperType: {
                  required: true
               },
               personName: {
                  required: true
               },
               position: {
                  required: true
               },
               mobile: {
                  required: true,
                  minlength: 11
               },
               detail: {
                  required: true,
                  maxlength: 300
               }
            },
            messages: {
               name: {
                  required: "请输入学校名称"
               },
               cooperType: {
                  required: "请选择合作类型"
               },
               personName: {
                  required: "请输入负责人"
               },
               position: {
                  required: "请输入职务"
               },
               mobile: {
                  required: "请输入手机号",
                  minlength: "手机号格式不正确"
               },
               detail: {
                  required: "请输入详细说明",
                  maxlength: "最多输入300字"
               }
            },
            submitHandler: function(form) {
               const formData = {
                  name: $('#name').val(),
                  cooperType: $('#cooperType').val(),
                  personName: $('#personName').val(),
                  position: $('#position').val(),
                  mobile: $('#mobile').val(),
                  type: 3,
                  detail: $('#detail').val(),
               };
               $.ajax({
                  type: 'POST',
                  url: '/cooper',
                  data: formData,
                  dataType: 'json',
                  success: function(data) {
                     if(data.message!=null){
                        swal({
                           text: data.message,
                           icon: 'error'
                        });
                     }else{
                        swal({
                           text: "申请成功！",
                           icon: 'success'
                        });
                     }
                  },
                  error: function(jqXHR, textStatus, errorThrown) {
                     console.log('Error: ' + textStatus);
                  }
               });
            }
         });
      })
   </script>
</body>
</html>
